<template>
  <div id="app">
    <div id="nav">
      <router-link to="/">Home</router-link> |
      <router-link to="/about">About</router-link>
    </div>
    <router-view/>
    <v-table
            :width="1000"
            :columns="columns"
            :table-data="tableData"
            :show-vertical-border="false"
    ></v-table>
  </div>
</template>

<script>
import Vue from 'vue';
// 引入样式
import '@/easytable/themes-base/index.css'
// // 导入 table 和 分页组件
import VTable from '@/easytable/v-table';
// import VPagination from '@easytable/v-pagination'
// 注册到全局
Vue.component(VTable.name, VTable)
// Vue.component(VPagination.name, VPagination)
// Vue.use(VTable, VPagination);
Vue.use(VTable)

export default {
  components: {VTable },
  data: function() {
    return {
        tableData: [
            {"name":"赵伟","tel":"156*****1987","hobby":"钢琴、书法、唱歌","address":"上海市黄浦区金陵东路569号17楼"},
            {"name":"李伟","tel":"182*****1538","hobby":"钢琴、书法、唱歌","address":"上海市奉贤区南桥镇立新路12号2楼"},
            {"name":"孙伟","tel":"161*****0097","hobby":"钢琴、书法、唱歌","address":"上海市崇明县城桥镇八一路739号"},
            {"name":"周伟","tel":"197*****1123","hobby":"钢琴、书法、唱歌","address":"上海市青浦区青浦镇章浜路24号"},
            {"name":"吴伟","tel":"183*****6678","hobby":"钢琴、书法、唱歌","address":"上海市松江区乐都西路867-871号"}
        ],
        columns: [
            {field: 'name', title:'姓名', width: 100, titleAlign: 'center',columnAlign:'center'},
            {field: 'tel', title: '手机号码', width: 260, titleAlign: 'center',columnAlign:'center'},
            {field: 'hobby', title: '爱好', width: 330, titleAlign: 'center',columnAlign:'center'},
            {field: 'address', title: '地址', titleAlign: 'center',columnAlign:'left'}
        ]
    }
  }
}
</script>


<style>
#app {
  font-family: 'Avenir', Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
}
#nav {
  padding: 30px;
}

#nav a {
  font-weight: bold;
  color: #2c3e50;
}

#nav a.router-link-exact-active {
  color: #42b983;
}
</style>
